<template>
<!-- 大胡子语法，插值表达式 {{}} -->
  <div>哈哈
    <p>{{ msg }}</p>
    <p>拼接字符串：{{ msg + "好牛逼啊！" }}</p>
    <p>姓名：{{ obj.name }}</p>
    <p>年龄：{{obj.age}}</p>
    <p>10年后的年龄:{{ obj.age + 10 }}</p>
    <p>{{ obj.age > 18 ? "已成年" : '未成年'}}</p>
    <!-- <a v-bind:href="url">点击去百度</a> -->
    <!-- 简写方式 -->
    <a :href="url">点击去百度</a>
    <img v-bind:src="imgSrc" alt="">

    <p>购买数量{{count}}</p>
    <button v-on:click="addFn">+</button>
    <button v-on:click="count++">+</button>
    <button v-on:click=addCountFn(5)>+</button>
    <button v-on:click="reFn">-</button>


    <a href="www.baidu.com">百度</a>
    <a href="www.taobao.com">淘宝</a>
  </div>
</template>

<script>
export default {

  //Es6写法
  data(){
    return {
      //提供数据
      msg:'hello vue!',
      obj:{
      name:'zs',
      age:19
      },
      url:'https://www.baidu.com/',
      imgSrc:'http://yun.itheima.com/Upload/./Images/20210412/60741c11ab77b.jpg ',
      count: 1,
    }
  },

  methods: {

      addFn() {
        this.count++
      },
      addCountFn(sum) {
        this.count= this.count + sum
      },
      reFn() {
        this.count--
      }
    }
    //1data中的数据会挂载到 当前vue组件实例对象上  
    //2在methods的函数中，函数内部的this指向当前vue组件实例对象上
    //3所以 就可以在函数内通过this访问到data中的数据了  
};
</script>

<style lang="less">
div{
  color:red;
}

p{
  color:skyblue;
}
</style>
